<template>
  <div v-loading="loading">
    <el-row :gutter="20">
      <!-- 左上角：基本信息 -->
      <el-col :span="24">
        <UserBasicInfo :user="state.user">
          <template #header>
            <div class="card-header">
              <CardTitle title="基本信息"/>
            </div>
          </template>
        </UserBasicInfo>
      </el-col>

      <!-- 下边：账户明细 -->
      <el-col :span="24" style="margin-top: 20px">
        <el-card header="账户明细" shadow="never">
          <el-tabs>
            <el-tab-pane label="浇地管理">
              <UserJdOrderList :userid="id">
                <template #header>
                  <div class="card-header">
                    <CardTitle title="浇地管理"/>
                  </div>
                </template>
              </UserJdOrderList>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
// import * as UserApi from '@/api/member/user'
// import { useTagsViewStore } from '@/store/modules/tagsView'
import UserBasicInfo from './UserBasicInfo.vue'
import UserJdOrderList from './UserJdOrderList.vue'
import {ElMessage} from 'element-plus'
import {getUserList} from "/@/api/user/user";
import {ref, onMounted, reactive} from "vue";

defineOptions({name: 'MemberDetail'})

const loading = ref() // 加载中
// const user = ref<UserApi.UserVO>({} as UserApi.UserVO)

import {useRoute} from 'vue-router';

const route = useRoute()
const id = Number(route.query.id)

const state = reactive<UserDetail>({
  user: {
    id: '',
    name: '',
    phone: '',
    remake: '',
    unpaidOrderAmount: '',
    unpayOrderNum: '',
  },
});

/** 获得用户 */
const getUserData = async (id: number) => {
  const params = {id: id}
  const data = await getUserList(params);
  console.log(data.data.rows[0])
  state.user = data.data.rows[0]
}


onMounted(() => {
  getUserData(id);
});


/** 初始化 */
</script>
<style scoped lang="css">
.detail-info-item:first-child {
  padding-left: 0 !important;
}

/* first-child 不生效有没有大佬给看下q.q */
.detail-info-item:nth-child(2) {
  padding-right: 0 !important;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
